<!--
 * @Author: Wangtao
 * @Date: 2020-09-21 09:55:09
 * @LastEditors: Wangtao
 * @LastEditTime: 2020-11-03 10:27:36
-->
<template>
  <div class="remote-search">
    <m7Select
      size="mini"
      :value="value"
      :placeholder="placeholder"
      filterable
      :multiple="false"
      :collapse-tags="false"
      :options="options"
      :remote="true"
      :defaultProps="{ label: 'name', value: '_id' }"
      @loadMore="loadMore"
      :remoteLoading="remoteLoading"
      @input="defaultChange"
      @remoteMethod="remoteMethod"
    >
    </m7Select>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { IvrModule } from '@/store/modules/config/ivr'
import cloneDeep from 'lodash/cloneDeep'
@Component({
  name: 'SearchCheckbox',
  components: {

  }
})
export default class RemoteSearch extends Vue {
  @Prop({ default: () => '' }) private remoteUrl!: any
  @Prop({ default: () => '' }) private placeholder!: any

  @Prop() public value !: {
    required: true
  }

  private timer: any
  private isRemote: any = false

  private queryName: any = ''

  private mark: any = false

  private remoteLoading: any = false

  private mounted () {
    this.getOptionsList()
  }

  private options: any = []

  private cloneOptions: any = [] // 检索前的options

  private pagingData: any = {
    limit: 10,
    page: 1
  }

  private clonePage: any = 1 // 检索前的page数据

  private isLoading = false
  private cloneLoading = false

  private loadMore () {
    if (!this.isLoading) {
      this.pagingData.page++
      this.getOptionsList()
    }
  }

  private getOptionsList () {
    if (IvrModule.selectCache[this.remoteUrl] && IvrModule.selectCache[this.remoteUrl].sign) {
      this.options = [...IvrModule.selectCache[this.remoteUrl].options]
    } else {
      IvrModule.setSelectCache({ key: this.remoteUrl, value: { sign: true } })
      this.isLoading = true
      const query: any = {}
      if (this.queryName) {
        query.name = this.queryName
      }
      const actionData = Object.assign({ limit: this.pagingData.limit, page: this.pagingData.page }, query)
      const data = { url: this.remoteUrl, method: 'POST', data: actionData }
      IvrModule.IvrCommonAction(data).then((res: any) => {
        this.remoteLoading = false
        if (res.list.length < this.pagingData.limit) {
          this.isLoading = true
        } else {
          this.isLoading = false
        }
        this.options = [...this.options, ...res.list]
        if (!this.queryName) {
          IvrModule.setSelectCache({ key: this.remoteUrl, value: { page: this.pagingData.page, options: cloneDeep(this.options), sign: true } })
          this.cloneLoading = this.isLoading
        }
      })
    }
  }

  // private remoteMethod (newQuery) {
  //   this.queryName = newQuery
  //   if (newQuery) {
  //     this.delayLoading()
  //   } else {
  //     let isExist = false
  //     this.cloneOptions.some(item => {
  //       if (item._id === this.value) {
  //         isExist = true
  //         return true
  //       }
  //     })
  //     if (!isExist) {
  //       this.options.some(item => {
  //         if (item._id === this.value) {
  //           this.cloneOptions.unshift(item)
  //           return true
  //         }
  //       })
  //     }
  //     this.options = IvrModule.selectCache.options
  //     this.pagingData.page = IvrModule.selectCache.page
  //     this.isLoading = this.cloneLoading
  //   }
  // }

  // private delayLoading () {
  //   if (!this.mark) {
  //     this.remoteLoading = true
  //     this.mark = true
  //     this.options = []
  //     this.pagingData.page = 1
  //     this.timer = setTimeout(() => {
  //       this.mark = false
  //       this.getOptionsList()
  //     }, 500)
  //   }
  // }

  @Watch('value')
  private defaultChange (newValue) {
    this.$emit('input', newValue)
  }
}
</script>

<style lang="stylus" scoped>
</style>
<style lang="stylus">
body
  .el-select-dropdown__empty
    padding 10px 0 10px
</style>
